<!Doctype html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <title>droppable demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
    <style>
        .drag{
            position: absolute;
            height: 30px;
            background: #ffff00;
            border-width : 2px;
            border-color : #F00025;
            border-style : dashed;
            border-radius: 7px;
            width : 100px;
            overflow : visible;
            padding : 0px;
            margin : 0px;
            font-family : cursive;
            font-size : 12pt;
        }
        .drop{
            position: absolute;
            font-family : cursive;
            width: 250px;
            height: 40px;
            background: green;
            color: #fff;
            padding: 5px;
            border-width : 2px;
            border-style : dashed;
            border-color : #164f08;
            border-radius: 7px;
        }

        #container{
            position: absolute;
            top: 100px;
            left: 100px;
            background: #ba55d3;
            width: 600px;
            height: 600px;
            border-radius: 7px;
            border-width: 3px;
            border-style: dashed;
            border-color: #9400d3
        }
        .Score{
            font-family : cursive;
            font-size: 24px;
            color: #fff;
        }
        #winGameAlert{
            font-family: cursive;
            font-size: 70px;
            color: red;
            width: 350px;
            background: #8bce43;
            border-width: 4px;
            border-color: #164f08;
            border-style: dashed;
            border-radius: 7px;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
</head>
<body>
<div id="container"></div>
<div id="container2"></div>

<script>

    const WORDNUM = 7;

    var xml = '<dict>' +
                '<word>' +
                    '<vn>chào</vn>' +
                    '<eng>hello</eng>' +
                '</word>' +
                '<word>' +
                    '<vn>Giáo Viên</vn>' +
                    '<eng>Teacher</eng>' +
                '</word>' +
               '</dict>';
    /**
     * Array vs index la VN
     * @type {Array}
     */
    var dictvn = new Array();
    /**
     * Array vs index la ENG
     * @type {Array}
     */
    var dicten = new Array();

    /**
     * Parse xml va dua nghia vao dictvn va dicten
     * @param xml
     */
    function myPaserXML(xml){
        xmlDoc = $.parseXML(xml);
        $xml = $(xmlDoc);
        $xml.find("word").each(function(){
            var vn = $(this).find('vn').text();
            var eng = $(this).find("eng").text();
            dictvn[vn] = eng;
            dicten[eng] = vn;
        })
    }
    /**
     * Array chua cac doi tuong drag (ko phai doi tuong jQuery
     * @type {Array}
     */
    var dragElementArr = new Array();
    var dropElementArr = new Array();
    function onlineFind(w){
        var wd = w;
        var returnVal = {};
        $.post("findRespond.php",
            {
                word: wd 
            },
            function(data,status){
                var xmlDoc = $.parseXML(data);
                $xml = $(xmlDoc);
                returnVal.word = $xml.find("word").text();
                returnVal.mean = $xml.find("mean").text();
                dicten[returnVal.word] = returnVal.mean;
        });
        return returnVal;
    }
    function getMean(word){
        if(dicten[word]!=undefined){
            return dicten[word];
        }else if(dictvn[word]!=undefined){
            return dictvn[word];
        }else{
            onlineFind(word);
            if(dicten[word]!=undefined){
				return dicten[word];
            }else{
            	return "not Found!";
            }
        }
    }
    /**
     * Diem, So move
     * @type {Number}
     */
    var moveCount = 0;
    /**
     * cong move len 1 va hien thi
     */
    function plusMove(){
        $("#dragdropMove").text("Moves: "+(++moveCount));
    }
    /**
     * offSet cua container
     * @type {*}
     */
    var conOffset = $("#container").offset();

    /**
     * mang bool check xem tu ghep dung hay sai
     * @type {Array}
     */
    var isMatch = new Array();

    /**
     * check if all element in isMatch is True
     */

    function isAllMatch(){
        for( var i = 0 ; i < WORDNUM ; i++){
            if(!isMatch[i]){
                return false;
            }
        }
        return true;
    }
    function xuli(){

    }
    function winGameAlert(){
        $("#container2").append('<div id ="winGameAlert" class="alert"> Chính Xác</div> ');
        $("#winGameAlert").offset({"left": conOffset.left+150, "top": conOffset.top + 200})
                .bind("Click",xuli());
    }
    var dragElement = function(x,y,word){
        this.x = x;
        this.y = y;
        this.word = word;
        this.id = "dragElement"+x+"v"+y;

        dragElementArr[this.id] = this;
        $("#container2").append("<div id ='"+this.id+"' >"+this.word+"</div>");
        $("#"+this.id).addClass("drag")
                .offset({left: this.x, top: this.y})
                .draggable({
                    revert: true,
                    start: function(){
                        $(this).stop();
                    }
                });
    }


    var dropElement = function(x,y,word,tt){
        this.hold = null;
        this.x = x;
        this.tt = tt;
        this.y = y;
        this.word = word;
        this.mean = getMean(this.word);
        this.id = "dropElement"+this.x+"v"+this.y;
        dropElementArr[this.id] = this;

        $("#container").append("<div id ='"+this.id+"' >"+this.mean+"</div>");
        $("#"+this.id).addClass("drop")
                .offset({left: this.x, top: this.y})
                .droppable({
                    over: function() {
                        $(this).animate({"width":"300px"},200);
                    },
                    drop: function(event,ui){
                        var event = event;
                        var ui = ui;
                        //oldOffset = ui.offset;
                        if(dropElementArr[$(this).attr('id')].hold != null){
                            var temp = dropElementArr[$(this).attr('id')].hold;
                            var tempElement = dragElementArr[temp.attr('id')];
                            var x = tempElement.x,
                                y = tempElement.y;
                            temp.animate({"left": x,"top": y},200);
                        }
                        var temp2 = dropElementArr[$(this).attr('id')];

                        temp2.hold = ui.draggable;
                        var temp3 = dragElementArr[ui.draggable.attr('id')];

                        if(temp2.word != temp3.word){
                            $(this).css("background-color","yellow");
                            isMatch[temp2.tt] = false;
                        }else{
                            $(this).css("background-color","green");
                            isMatch[temp2.tt] = true;
                        }


                        ui.draggable.draggable({revert: false});
                        ui.draggable.stop();
                        var offset = $(this).offset();
                        ui.draggable.animate({"left": offset.left+150,"top": 7+offset.top },200);

                        plusMove();

                        if(isAllMatch()){
                            winGameAlert();
                        }
                        $(this).stop().animate({"width": "250px"},100);

                    },
                    out: function(event,ui){
                        var ui = ui;
                        //ui.draggable.draggable({revert: true});
                        var temp = ui.draggable;
                        var offset = oldOffset[temp.context.id];
                        temp.animate({"left": offset.left,"top": offset.top},500);
                        $(this).css("background-color","green");
                        dropElementArr[$(this).attr('id')].hold = null;
                        $(this).stop().animate({"width": "250px"},100);

                        isMatch[dropElementArr[$(this).id].tt] = false;
                    },
                    tolerance: "touch"

                });

    }

    function initWord(wordArr){
		for(var i=0 ; i<wordArr.length ; i++){
		  onlineFind(wordArr[i]);
		}
        setTimeout(function(){
            for(var i=0; i<WORDNUM;i++){
                if(i==5){
               	    new dropElement(conOffset.left + 10,conOffset.top + 60+ i*80,"ant",i);
                   
                
                }else{
                    new dropElement(conOffset.left + 10,conOffset.top + 60+ i*80,"hello",i);
                }

            }
            for(var i = 0; i<WORDNUM-1; i++){
                new dragElement(conOffset.left + 400,conOffset.top + 60+i*80,"hello");
            }
            new dragElement(conOffset.left + 400,conOffset.top + 60+i*80,"ant");

            for(var i=0; i<WORDNUM;i++){
                isMatch[i] = false;
            }
        },3000);
        
    }

    $(function(){
        myPaserXML(xml);
        var wordArr = ["ant","job"];
        initWord(wordArr);

        var score = $('<div id = "dragdropMove" class = "Score">Moves: 0</div>');
        $("#container").append(score);
        $(".drag").each(function(){
            /*$(this).oldOffset = {left: 0,top: 0};
             $(this).oldOffset.left = $(this).offset.left;
             $(this).oldOffset.top = $(this).offset.top;*/
            $(this).oldOffset = $(this).offset();
            var temp = $(this).context.id;
            oldOffset[temp] = $(this).offset();
        });
    });

    var oldOffset = new Array();
</script>

</body>
</html>
